<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>提交订单 | 机械配件商城</title>
		<link rel="stylesheet" type="text/css" href="./element-ui/index.css">
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<link rel="stylesheet" type="text/css" href="./components/min-width-container.css"/>
		<link rel="stylesheet" type="text/css" href="./components/footer-bottom.css"/>
		<link rel="stylesheet" type="text/css" href="./components/footer-image.css" />
		<link rel="stylesheet" type="text/css" href="./components/footer-link.css" />
		<link rel="stylesheet" type="text/css" href="./components/header-full.css" />
		<link rel="stylesheet" type="text/css" href="./components/user-frame.css" />
		<style>
			.app-title{
				font-weight: 900;
			}
			
			.app-addr-item{
				display: inline-block;
				width: 238px;
				height: 107px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url(images/shdz_bgon.gif);
				vertical-align: bottom;
				padding: 12px;
				position: relative;
			}

			.app-addr-item-plain{
				background-image: url(images/shdz_bg.gif);
			}
			
			.app-addr-change{
				display: inline-block;
				vertical-align: bottom;
				margin-left: 8px;
				color: #F49B50;
				text-decoration: underline;
			}
			
			.app-addr-default{
				position: absolute;
				top: 0;
				right: 0;
				background: #F2F2F1;
				padding: 2px 4px;
				
			}
			
			.app-header{
				display: grid;
				width: 100%;
				grid-template-columns: 1fr 200px 200px 200px;
				border-top: 3px solid #40B4E6;
				background: #F2F2F2;
			}
			
			.app-header > div{
				line-height: 2.2;
			}
			
			.app-item{
				display: grid;
				width: 100%;
				grid-template-columns: 1fr 200px 200px 200px;
				grid-template-rows: 80px;
				border-left: 1px solid #F2F2F2;
				border-top: 1px solid #F2F2F2;
			}
			
			.app-item > div{
				border-bottom: 1px solid #F2F2F2;
				border-right: 1px solid #F2F2F2;
				line-height: 78px;
			}
			
			
			.app-counter{
				display: flex;
				height: 55px;
				line-height: 55px;
				align-items: center;
				background: #F2F2F2;
				margin-top: 30px;
			}
			
			.app-counter *{
				vertical-align: middle;
			}
			
			.app-counter-clear{
				flex-grow: 1;
				margin-left: 40px;
			}
			
			.app-counter-price{
				margin: 0 30px;
			}
			
			.app-counter-submit{
				align-self: stretch;
				width: 128px;
				background: #F6660E;
				line-height: 55px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header-full :bordered="true"></header-full>
			<user-frame class="m-t-20">
				<div class="app-title text-general-1 m-t-20 m-b-20">
					商品信息
				</div>
				<div class="app-addr text-4 text-general-1">
					<div class="app-addr-item" v-if="addr_selected">
						<div style="border-bottom:  1px solid #F5F5F5;">{{addr_selected.name}} 收</div>
						<div>{{addr_selected.province}} {{addr_selected.city}} {{addr_selected.district}}</div>
						<div>{{addr_selected.addr}}; {{addr_selected.mobile}}</div>
						<div class="text-important-very pointer">编辑</div>
						<div class="app-addr-default" v-if="addr_selected.deFault === 1">默认地址</div>
					</div>
					<div class="app-addr-change pointer text-4"  @click="open_select_addr">更换地址</div>
				</div>
				<div><el-divider></el-divider></div>

				<transition name="el-zoom-in-top">
					<div  v-show="add_selector_show" class="app-addrs transition-box">
						<div class="app-title text-general-1 m-b-12">
							选择收货地址
						</div>
						<div class="app-addrs-body text-4 text-general-1">
							<div class="app-addr-item app-addr-item-plain m-b-20 m-r-12" v-for="item in addrs">
								<div style="border-bottom:  1px solid #F5F5F5;">{{item.name}} 收</div>
								<div>{{item.province}} {{item.city}} {{item.district}}</div>
								<div>{{item.addr}}; {{item.mobile}}</div>
								<div class="text-important-very pointer" @click="select_addr(item)">选择</div>
								<div class="app-addr-default" v-if="item.deFault === 1">默认地址</div>
							</div>
						</div>
					</div>
				</transition>

				<div class="app-title text-general-1 m-b-12">
					确认订单信息
				</div>
				<div class="app-header center text-4 text-general-1">
					<div>商品名称</div>
					<div>单价（元）</div>
					<div>数量</div>
					<div>实付（元）</div>
				</div>
				<div class="app-item center text-4 text-general-1 m-t-20" v-for="item in cart.lists">
					<div>{{item.name}}</div>
					<div>¥{{item.price.toFixed(2)}}</div>
					<div>x{{item.quantity}}</div>
					<div>¥{{item.totalPrice.toFixed(2)}}</div>
				</div>
				<div class="app-counter text-4 text-general-1">
					<div class="app-counter-clear pointer"><span class="pointer"></span></div>
					<div class="app-counter-price">商品金额: <span class="text-1 m-l-8" style="font-weight: 900; color: #F65D03;">¥{{cart.totalPrice.toFixed(2)}}</span></div>
					<div class="app-counter-submit pointer center text-weak-4" @click="go_order_detail">提交订单</div>
				</div>
			</user-frame>
			<footer-image></footer-image>
			<footer-link></footer-link>
			<footer-bottom></footer-bottom>
		</div>
		<script src="./js/vue.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./element-ui/index.js"></script>
		<script src="./components/min-width-container.js"></script>
		<script src="./components/footer-image.js"></script>
		<script src="./components/footer-bottom.js"></script>
		<script src="./components/footer-link.js"></script>
		<script src="./components/header-full.js"></script>
		<script src="./components/user-frame.js"></script>
		<script>
		    const app = new Vue({
		        el: "#app",
		        data(){
					return {
						add_selector_show: false,
						addrs:[],
						addr_selected: null,
						cart: {
							lists: [],
							totalPrice: 0
						}
					};
		        },
		        created(){
		        	// 加载地址列表
		        	axios.post("/addr/findaddrs.do").then(response=>{
						if(response.data.status === 0){
							this.addrs = response.data.data;
							for(let addr of this.addrs){
								if(addr.deFault === 1){
									this.addr_selected = addr;
								}
							}
						}else{
		        			console.log(response.data.msg);
						}
		        	}).catch(err=>{
		        		console.log(err);
		        	});

		        	// 从session读取购物信息
		        	const cart = JSON.parse(sessionStorage.getItem("cart"));
		        	if(cart){
		        		this.cart = cart;
		        	}
		        },
		        methods: {
		            go_order_detail(){
		            	if(this.addr_selected == null){
							this.$message.info("请选择地址");
		            		return;
		            	}
						if(this.cart.is_simulated_cart){
							const params = new URLSearchParams();
							params.append("addrId", this.addr_selected.id);
							params.append("productId", this.cart.lists[0].productId);
							params.append("quantity", this.cart.lists[0].quantity);
							axios.post("/order/createsingleproductorder.do", params).then(response=>{
								if(response.data.status === 0){
									window.location.href = '/order-detail.html?' + response.data.data.orderNo;
								}else{
									if(response.data.msg){
										this.$message.error(response.data.msg);
									}
								}
							}).catch(err=>{
								console.log(err);
								this.$message.error("连接服务器异常");
							});
						}else{
							const params = new URLSearchParams();
							params.append("addrId", this.addr_selected.id);
							axios.post("/order/createorder.do", params).then(response=>{
								if(response.data.status === 0){
									window.location.href = '/order-detail.html?' + response.data.data.orderNo;
								}else{
									if(response.data.msg){
										this.$message.error(response.data.msg);
									}
								}
							}).catch(err=>{
								console.log(err);
								this.$message.error("连接服务器异常");
							});
						}
					},
					open_select_addr(){
						this.add_selector_show = true;
					},
					select_addr(addr){
						this.add_selector_show = false;
						this.addr_selected = addr;
					}
		        }
		    });
			
		</script>
	</body>
</html>
